<template>
    <div class="common_br">
        <h2 class="common_channel_title">
            {{ getValue(form.elementName, dataDict.channelGradeLevel1ElementDict) || form.elementName }}</h2>
        <div class="common_content">
            <!-- <Form ref="formData" :model="formData" :rules="formRules" :label-width="120"> -->
            <Row>
                <Col :lg="24" :xl="12" v-for="(item,index) in form.children" :key="index">
                    <div class="common-form-item" v-if="item.dscode !== '1'">
                        <FormItem
                            :label="getValue(item.elementName, dataDict.channelGradeElementDict) || item.elementName"
                            :prop="item.elementNo"
                            :rules="{required: true, message: '请输入'+item.elementName, trigger: 'change'}"
                        >
                            <template v-if="item.elementEditType === '0'">
                                <Select v-model="formData[item.elementNo]" placeholder>
                                    <Option v-for="(itm,idx) in dataDict[item.elementEditSrc+'Dict']" :key="idx"
                                            :value="itm.value">{{ itm.title }}
                                    </Option>
                                </Select>
                            </template>
                            <template v-else-if="item.elementEditType === '1'">
                                <Input v-model="formData[item.elementNo]" placeholder/>
                            </template>
                            <template v-else-if="item.elementEditType === '2'">
                                <Input v-model="formData[item.elementNo]" placeholder/>
                            </template>
                        </FormItem>
                        <div class="result">
                            <span>计算结果:</span>
                            <!--                            <span v-if="item.dscode === '1'">{{getResult(resultDtlMap, item.elementNo) / 100}}</span>-->
                            <span>{{ getResult(resultDtlMap, item.elementNo) }}</span>
                        </div>
                    </div>
                </Col>
            </Row>
            <!-- </Form> -->
        </div>
    </div>
</template>

<script>
export default {
    // 个人信息
    name: 'ResultItem',
    data() {
        return {}
    },
    props: {
        formData: {
            type: Object,
            require: true
        },
        form: {
            type: Object,
            required: true,
        },
        dataDict: {
            type: Object,
            required: true,
        },
        resultDtlMap: {
            type: Object,
        }
    },
    methods: {
        getResult(resultDtlMap, elementNo) {
            let dtlValue = '';
            if (resultDtlMap && elementNo && resultDtlMap[elementNo]) {
                dtlValue = resultDtlMap[elementNo].dtlValue
            }
            return dtlValue;
        },
        getValue(value, dict) {
            if (!value || !dict) return;
            for (let i = 0; i < dict.length; i++) {
                if (value === dict[i].value)
                    return dict[i].title
            }
            return '';
        },
    }
}
</script>

<style lang="less">
.common-form-item {
    display: flex;
    flex-flow: row nowrap;
    justify-content: start;

    .result {
        line-height: 32px;

        span {
            padding-left: 16px;
        }
    }

    .ivu-form-item-content {
        width: 200px;
    }
}
</style>
